<html lang="en">
<head>
    <title>地区管理</title>
    <#include "../common/header.ftl">
    <script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/treeview/bootstrap-treeview.js"></script>
    <link rel="stylesheet" href="/js/plugins/treeview/bootstrap-treeview.css" type="text/css" />
    <script>
        $(function () {
            //等页面加载完就执行过函数,发送ajax,首先查询没有父地区的名称
            $.post("/region/getRegionsByParentId.do",function (parentData) {
                $('#treeview'). treeview({
                    color: "#428bca",
                    data: [{text:'全部地区',nodes:parentData}],
                    //显示tags元素,全局配置函数
                    showTags: true,
                    //当选中图标,时执行此函数,当前node.是当前选中节点的json对象,把子节点查询出来
                    lazyLoad:function (node) {
                        $.post("/region/getRegionsByParentId.do",{parentId:node.id},function (childData){
                            //将返回的节点挂在到父节点上面,
                            //参数1,是方法名,不能修改
                            $('#treeview').treeview('addNode', [ childData, node]);
                        })
                    },
                    //节点选中事件,当节点选中的时候,触发此函数,data就是此节点对象
                    onNodeSelected: function(event, data){
                        //当节点选中的时候发送ajax,将
                          $.post("/region/getRegionsByParentId.do",{parentId:data.id},function (childData){
                            //返回的是一个数组
                            var html = "";
                            $.each(childData,function (index,data) {
                                //编辑时将数据回显
                                //拼接操作按钮
                                var editBtn =  "<a href='javascript:void(-1);' class='btn btn-success' data-json="+data.json+" id='addRegionBtn'>操作</a>";
                                html += "<tr><td>"+(index+1)+"</td><td>"+data.text+"</td><td><html>"+editBtn+"<html></td></tr>";
                            })
                              //选中tbody,给添加html
                            $('tbody').html(html);
                        })
                    }
                });

                //给编辑模态框动态添加点击事件
                //1确定要绑定的大体位置
                //参数一:绑定事件的名称
                //2给哪些元素绑定事件
                //参数三:绑定的函数
                var editJson;
                $('tbody').on("click","#addRegionBtn",function () {
                    $('#editForm')[0].reset();
                    //将回显的数据放入模态框中在显示模态框
                    editJson = $(this).data("json");

                    if (editJson){
                    $('#regionId').val(editJson.id)
                    $("#editForm input[name='parent.name']").val(editJson.pname);
                    $("#editForm input[name='parent.id']").val(editJson.pid);
                    $("#editForm input[name='name']").val(editJson.name);
                    $("#editForm select[name='state']").val(editJson.state);
                    $("#regionModal").modal("show");
                    }
                })

                //添加地区操作
                $('#addRegionBtn').click(function () {
                    //选出选中的节点,js对象.就是父节点
                    $("#editForm")[0].reset();
                    var node = $('#treeview').treeview('getSelected')[0];
                    //设置上级地区和id
                    if (node) {
                        $("#editForm input[name='parent.name']").val(node.text);
                        $("#editForm input[name='parent.id']").val(node.id);
                    }else {
                        //如果是顶级目录就没必要添加parentid
                        $("#editForm input[name='parent.name']").val("添加顶级目录");
                    }

                    $('#regionModal').modal('show')
                });
                //提交操作
                $('#saveBtn').click(function () {
                    $("#editForm").ajaxSubmit(function (data) {
                        if (data.success) {
                            $.messager.confirm("温馨提示","修改成功",function () {
                                $('#regionModal').modal('hide')
                                $('tbody').empty()
                                $.post("/region/getRegionsByParentId.do",{parentId:editJson.pid},function (childData){
                                    //返回的是一个数组
                                    var html = "";
                                    $.each(childData,function (index,data) {
                                        //编辑时将数据回显
                                        //拼接操作按钮
                                        var editBtn =  "<a href='javascript:void(-1);' class='btn btn-success' data-json="+data.json+" id='addRegionBtn'>操作</a>";
                                        html += "<tr><td>"+(index+1)+"</td><td>"+data.text+"</td><td><html>"+editBtn+"<html></td></tr>";
                                    })
                                    $('tbody').html(html);
                                })
                            })
                        }else {
                            window.messager.alert("温馨提示",data.msg);
                        }
                    })
                })

            })

        })
    </script>
</head>
<body>
<!--左侧菜单回显变量设置-->
<#assign currentMenu="region">
<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl">
    <div class="row">
        <div class="col-sm-2">
            <#include "../common/menu.ftl">
        </div>
        <div class="col-sm-10">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">地区管理</h1>
                </div>
            </div>
            <a href="javascript:void(-1);" class="btn btn-success" id="addRegionBtn">添加地区</a>
            <div class="row">
                <div class="col-sm-4">
                    <div id="treeview"></div>
                </div>
                <div class="col-sm-8">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

<#--编辑模态框-->
<div id="regionModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑/增加</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" class="form-horizontal" method="post" action="/region/saveOrUpdate.do" >
                    <input id="regionId" type="hidden" name="id" value="" />
                    <div class="form-group">
                        <label class="col-sm-4 control-label">上级地区</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control"  name="parent.name" readonly >
                            <input type="hidden" class="form-control"  name="parent.id" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control"  name="name" placeholder="地区/景区名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">推荐状态</label>
                        <div class="col-sm-6">
                            <select name="state" class="form-control">
                                <option  value="0" class="form-control">不推荐</option>
                                <option value="1" class="form-control">推荐</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="btn btn-success" id="saveBtn" aria-hidden="true">保存</a>
                <a href="javascript:void(0);" class="btn" data-dismiss="modal" aria-hidden="true">关闭</a>
            </div>
        </div>
    </div>
</div>

</body>
</html>
